<template>
  <div class="p-2">
    <el-page-header @back="goBack" content="订单详情" class="mb-2" />

    <el-card shadow="never" class="mb-2">
      <el-descriptions :column="3" title="基本订单信息" class="mb-2" label-width="120px">
        <el-descriptions-item label="订单编号" width="30%">{{ detailForm.orderNo || '-' }}</el-descriptions-item>
        <el-descriptions-item label="订单类型" width="30%">{{ orderTypeText(detailForm.orderType) }}</el-descriptions-item>
        <el-descriptions-item label="标签" width="30%">{{ detailForm.tagId ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="订单ID" width="30%">{{ detailForm.id ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="备注" width="30%">{{ detailForm.remark || '-' }}</el-descriptions-item>
        <el-descriptions-item label="签名" width="30%">{{ detailForm.signature || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never" class="mb-2">
      <el-descriptions :column="3" title="结算信息" class="mb-2" label-width="120px">
        <el-descriptions-item label="应收/应付金额" width="30%">{{ fmtMoney(detailForm.amount) }}</el-descriptions-item>
        <el-descriptions-item label="优惠金额" width="30%">{{ fmtMoney(detailForm.discountAmount) }}</el-descriptions-item>
        <el-descriptions-item label="实收/实付金额" width="30%">{{ fmtMoney(detailForm.actualAmount) }}</el-descriptions-item>
        <el-descriptions-item label="结算状态" width="30%">{{ settleStatusText(detailForm.settleStatus) }}</el-descriptions-item>
        <el-descriptions-item label="凭证图片" width="30%">
             <image-preview :src="detailForm.voucherImgs " width="90px" height="90px" />
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never" class="mb-2">
      <el-descriptions :column="3" title="客户/供应商信息" class="mb-2" label-width="120px">
        <el-descriptions-item label="类型" width="30%">{{ customerTypeText(detailForm.customerType) }}</el-descriptions-item>
        <el-descriptions-item label="名称" width="30%">{{ detailForm.customerName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="联系人" width="30%">{{ detailForm.customerContactName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="电话" width="30%">{{ detailForm.customerPhone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="地址" width="30%">{{ detailForm.customerAddress || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never" class="mb-2">
      <el-descriptions :column="3" title="开单人信息" class="mb-2" label-width="120px">
        <el-descriptions-item label="主体名称" width="30%">{{ detailForm.companyName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="联系人" width="30%">{{ detailForm.companyContactName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="联系电话" width="30%">{{ detailForm.companyPhone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="主体地址" width="30%">{{ detailForm.companyAddress || '-' }}</el-descriptions-item>
        <el-descriptions-item label="开单人" width="30%">{{ detailForm.creatorName || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>产品列表信息</span>
        </div>
      </template>
      <el-table :data="detailForm.orderProductList" border>
         <el-table-column prop="productImg" label="产品图片" width="220" align="center">
          <template #default="scope">
            <image-preview :src="scope.row.productImg" width="50px" height="50px" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="产品名称">
          <template #default="scope">
            {{ scope.row.name || scope.row.productName || '-' }}
          </template>
        </el-table-column>
        <!-- 产品图片 -->
       
        <el-table-column prop="productSpecs" label="规格" width="220" />
        <el-table-column prop="productUnit" label="单位" width="220" />
        <el-table-column label="单价" width="220">
          <template #default="scope">
            {{ fmtMoney(scope.row.price ?? scope.row.unitPrice) }}
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" width="200" />
        <el-table-column label="金额" width="140">
          <template #default="scope">
            {{ fmtMoney((scope.row.price ?? scope.row.unitPrice ?? 0) * (scope.row.quantity ?? 1)) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getOrder } from '@/api/order';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const detailForm = ref<any>({});
const items = ref<any[]>([]);

const fmtMoney = (v: any) => {
  const n = Number(v ?? 0);
  return isFinite(n) ? n.toFixed(2) : '-';
};

const goBack = () => {
  router.back();
};

const loadDetail = async () => {
  const id = (route.query.id as any) ?? (route.params.id as any);
  if (!id) return;
  const res: any = await getOrder(id);
  const raw = res?.data ?? res ?? {};
  detailForm.value = raw;
  // 兼容不同字段命名的产品明细
  const candidates = [raw.items, raw.products, raw.productList, raw.orderItems];
  items.value = (candidates.find((x) => Array.isArray(x)) as any[]) || [];
};

onMounted(() => {
  loadDetail();
});
onUpdated(() => {
  // 处理图片预览
  loadDetail();
});
const orderTypeText = (t: any) => {
  const map: Record<number, string> = { 1: '发货单', 2: '进货单', 3: '报价单', 4: '销售单', 5: '采购单', 6: '对账单', 7: '退货单', 8: '物流单' };
  if (t && typeof t === 'object' && 'info' in t) return (t.info as any) ?? '-';
  const num = Number(t);
  return map[num] || (t ?? '-');
};
const settleStatusText = (s: any) => {
  const map: Record<number, string> = { 1: '未结', 2: '部分结', 3: '结清' };
  if (s && typeof s === 'object' && 'info' in s) return (s.info as any) ?? '-';
  const num = Number(s);
  return map[num] || (s ?? '-');
};
const customerTypeText = (v: any) => {
  if (v && typeof v === 'object' && 'info' in v) return (v.info as any) ?? '-';
  const map: Record<string, string> = { customer: '客户', supplier: '供应商' };
  const key = String(v || '').toLowerCase();
  return map[key] || (v ?? '-');
};
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>